<template>
      <div class="container">
            <div class="left"
                  v-if="goBack">
                  <slot name="left">
                        <el-button icon="el-icon-back"
                              type="info"
                              @click="backOnClick"></el-button>
                  </slot>
            </div>

            <div class="title">
                  <h1>
                        <slot>
                              {{$route.meta.title}}
                        </slot>
                  </h1>

            </div>

            <div class="right">
                  <slot name="right"></slot>
            </div>
      </div>
</template>

<script>
export default {
      props: {
            goBack: {
                  type: Boolean,
                  default: false
            }
      },
      methods: {
            backOnClick() {
                  this.$router.go(-1)
            }
      }
}
</script>

<style scoped>
.container {
      display: flex;
      align-items: center;
      height: 40px;
      /* padding-bottom: 20px; */
}

h1 {
      font-size: 22px;
      margin: 0;
}

.left {
      width: 80px;
}

.title {
      width: 300px;
}

.right {
      flex: 1;
      text-align: right;
}

.right > * {
      margin-left: 10px;
}
</style>